<template>
	<view class="container">
		<view class="card" v-for="item,index in tools" :key="index" @click="to(index)">
			{{item.name}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tools: [{
						name: '吃啥',
						url: '/select/what-eat/what-eat',
					},
					// {
					// 	name: '学啥',
					// 	url: '/pages/tools/tools',
					// }, {
					// 	name: '玩啥',
					// 	url: '/pages/select/select',
					// },
				]
			}
		},
		methods: {
			to(index) {
				uni.navigateTo({
					url: this.tools[index].url
				})
			}
		}
	}
</script>

<style>
	.container {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(48%, 1fr));
		gap: 10px;
		/* 卡片之间的间隙 */
		padding: 10px;
		/* 容器内边距 */
		justify-content: center;
		/* 水平居中 */
		align-items: start;
		/* 垂直顶部对齐 */
	}

	.card {
		background-color: #FFFFFF;
		/* 白色背景 */
		border-radius: 10px;
		/* 圆角 */
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
		/* 添加阴影效果 */
		display: flex;
		/* 启用flex布局 */
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		font-size: 40px;
		/* 字体大小，根据需要调整 */
		text-align: center;
		/* 文本居中对齐 */
		aspect-ratio: 1 / 1;
		/* 保持正方形，如果需要 */
		font-weight: 600;
	}
</style>